<script lang="ts" setup>
defineOptions({ name: 'PageCard' });

defineProps({
  title: {
    type: String,
    default: '',
  },
  light: Boolean,
  border: Boolean,
  headerDivider: Boolean,
  footerDivider: Boolean,
  round: {
    type: Boolean,
    default: true,
  },
  titleUnderline: Boolean,
  shadow: {
    type: String as PropType<'always' | 'never' | 'hover'>,
    default: 'always',
  },
});
</script>

<template>
  <section
    :class="{
      'page-card': true,
      'page-card__light': light,
      'page-card__border': border,
      'page-card__round': round,
      'page-card__shadow': shadow === 'always',
      'page-card__shadow-hover': shadow === 'hover',
    }"
  >
    <div class="header-wrap">
      <div v-if="$slots.title" :class="['title', titleUnderline && 'title-underline']">
        <slot name="title" />
      </div>
      <h2 v-else :class="['title', titleUnderline && 'title-underline']">{{ title }}</h2>
      <div class="header">
        <div class="header-left">
          <slot name="header-left" />
        </div>
        <div class="header-right">
          <slot name="header-right" />
        </div>
      </div>
    </div>
    <el-divider v-if="headerDivider" class="divider" />
    <div class="content">
      <slot />
    </div>
    <el-divider v-if="footerDivider" class="divider" />
    <div class="footer">
      <div class="footer-left">
        <slot name="footer-left" />
      </div>
      <div class="footer-right">
        <slot name="footer-right" />
      </div>
    </div>
  </section>
</template>

<style lang="scss" scoped>
.page-card {
  padding: 20px;
  margin-bottom: 5px;
  background-color: var(--el-bg-color);

  .header-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    // border-bottom: 1px solid #ebeef5;
    .title {
      margin: 0 15px 0 0;
      font-size: 18px;
      font-weight: 600;
      // border-bottom: 2px solid var(--el-color-primary);
      &:empty {
        margin-right: 0;
      }
    }

    .title-underline {
      border-bottom: 3px solid var(--el-color-primary);
    }

    .header {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: space-between;

      .header-left {
        margin-right: 15px;
      }
    }
  }

  .divider {
    margin: 15px 0;
  }

  .content {
    margin-top: 15px;
  }

  .footer {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;

    .footer-left {
      margin-right: 15px;
    }
  }
}

.page-card__light {
  color: var(--el-color-black);
  background-color: #fff;
}

.page-card__border {
  border: 1px solid #e5e9eb;
}

.page-card__round {
  border-radius: var(--border-radius);
}

.page-card__shadow {
  box-shadow: var(--el-box-shadow-light);
}

.page-card__shadow-hover:hover {
  box-shadow: var(--el-box-shadow-light);
}
</style>
